<template>
	<view class="">
		<up-sticky bgColor="#fff">
			<up-tabs :current="model.currentValue" :list="orderList" @click="tabClick" lineWidth="25"
				lineColor="#986C5D" :activeStyle="{ color: '#986C5D' }"></up-tabs>
		</up-sticky>
		<view class="order-detail-wrap">
			<view class="order-box" v-if="[0, 1, 2].includes(model.currentValue)">
				<view>{{ orderStatusMap.get(model.orderDeatil) }}</view>
				<view class="order-info">
					<view class="flex-ac">
						<view class="title">{{ model.orderDeatil.seriesName }}</view>
						<view class="plate">
							<image src="@/static/img/green-card.png" mode=""></image>
							<view class="numer">{{ model.orderDeatil.vehiclePlate }}</view>
						</view>
					</view>
					<view class="mt20">{{ model.orderDeatil?.seriesName }}{{ model.orderDeatil?.modelName }}</view>
				</view>
			</view>

			<view class="order-detail" v-if="model.currentValue === 0">
				<view class="order-box ">
					<view class="flex-ac box-title">
						<view class="line"></view>
						<view>取还车信息</view>
					</view>
					<view class="info-wrap">
						<view class="flex-jc">
							<view>取车方式：{{ model.orderDeatil.visitPickFlag == 1 ? '上门送车' : '网点取车' }}</view>
							<view>还车方式：{{ model.orderDeatil.visitbackFlag == 1 ? '上门取车' : '网点还车' }}</view>
						</view>
						<view class="mt20">租期：{{ model.orderDeatil.startTime }}至{{ model.orderDeatil.endTime }}</view>
					</view>
					<view class="info-wrap">
						<view class="subtitle">地址信息</view>
						<view>用户地址（取）：{{ getAddress(model.orderDeatil.vehiclePickAddress) }}</view>
						<view class="mt20">用户地址（还）：{{ getAddress(model.orderDeatil.vehicleBackAddress) }}</view>
					</view>
					<view class="info-wrap">
						<view class="mt20 flex">
							<view>取车网点/门店：</view>
							<view>{{ model.orderDeatil.vehiclePickStore?.storeName }}-{{
								model.orderDeatil.vehiclePickStore?.addressDetail }}</view>
						</view>
						<view class="flex">
							<view>还车网点/门店：</view>
							<view>{{ model.orderDeatil.vehicleBackStore?.storeName }}-{{
								model.orderDeatil.vehicleBackStore?.addressDetail }}</view>
						</view>
					</view>
					<view class="flex mt20">
						<view>用户信息：</view>
						<view>
							<view>{{ model.orderDeatil.renter?.name }}</view>
							<view>{{ model.orderDeatil.renter?.phone }}</view>
						</view>
					</view>
					<view class="mt20 flex">
						<view>订单备注：</view>
						<view class="flex">
							<view></view>
							<up-button type="primary" color="#986C5D" shape="circle" size="mini" plain text="添加备注"
								@click="addRemark"></up-button>
						</view>
					</view>

				</view>
				<view class="order-box">
					<view class="flex-ac box-title">
						<view class="line"></view>
						<view>订单信息</view>
					</view>
					<view class="mt20">订单号：{{ model.orderDeatil.orderNo }}</view>
					<view class="mt20">下单时间：{{ model.orderDeatil.submitTime }}</view>
					<view class="mt20">订单来源：{{ orderChannelMap.get(model.orderDeatil.orderChannel) }}</view>

				</view>
				<view class="order-box">
					<view class="flex-ac box-title">
						<view class="line"></view>
						<view>服务保障</view>
					</view>
				</view>
				<view class="order-box">
					<view class="flex-ac box-title">
						<view class="line"></view>
						<view>取消规则</view>
					</view>
				</view>
				<view class="order-box">
					<view class="flex-ac box-title">
						<view class="line"></view>
						<view>服务政策</view>
					</view>
				</view>
			</view>

			<!-- <OutBound v-if="model.currentValue === 1"></OutBound> -->
			<pickUP v-if="model.currentValue == 1" :order="model.orderDeatil"></pickUP>
			<backUP v-if="model.currentValue == 2" :order="model.orderDeatil"></backUP>
			<OrderFee v-if="model.currentValue == 3" :order="model.orderDeatil"></OrderFee>
			<Log v-if="model.currentValue == 4" :order="model.orderDeatil"></Log>
		</view>
	</view>
</template>
<script setup>
import { ref, reactive } from "vue"
import OutBound from "./outbound.vue"
import OrderFee from "./orderFee.vue"
import pickUP from "./pickUP.vue";
import backUP from "./backUP.vue";
import Log from "./log.vue"

import { onLoad } from "@dcloudio/uni-app";
import { getRequest } from "../../reuqest/request";
import { orderStatusMap, orderChannelMap } from "../../utils/constans";

const orderList = reactive([
	{ name: "订单信息", value: 0 },
	{ name: "取车信息", value: 1 },
	{ name: "还车信息", value: 2 },
	{ name: "费用信息", value: 3 },
	{ name: "操作记录", value: 4 },
]);
// { name: "出库信息", value: 1 },
// { name: "入库信息", value: 4 },

const model = reactive({
	param: {},
	currentValue: 0,
	orderDeatil: {}
})

const getAddress = (item) => {
	if (!item) return "-"
	return item?.provinceName + item?.cityName + item?.areaName + item?.addressDetail
}

const tabClick = (item) => {
	model.currentValue = item.value;
	console.log(item, model.currentValue);
}

const getData = (uuid) => {
	getRequest(`/wx-operation/api/v1/bm/order/get/${uuid}`).then(res => {
		if (res.bizCode === "00000") {
			model.orderDeatil = res.data;
			console.log(res.data);
		}
	});
}

const addRemark = () => {

}

onLoad((options) => {
	if (options.param) {
		model.param = JSON.parse(options.param);
		model.currentValue = model.param.current;
		console.log(options, model);
		getData(model.param.uuid)
	}
})
</script>
<style lang="scss" scoped>
.order-detail-wrap {
	// height: 20px;
	padding: 20rpx;
	font-size: 24rpx;
	color: #525252;

	.order-info {
		margin-top: 20rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.order-detail {
		.subtitle {
			font-size: 26rpx;
			color: #000;
			margin: 20rpx 0;
			font-weight: bold;
		}

		.info-wrap {
			border-bottom: 1px solid #ccc;
			padding-bottom: 20rpx;
		}
	}

}
</style>
